<template>
  <div class="visitor">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>物业服务</el-breadcrumb-item>
        <el-breadcrumb-item>访客记录</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/RepairManagement' }">
          访问详情
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h1>访问详情</h1>
    </div>

    <div class="content">
        <p>访客信息</p>
        <el-form class="demo-form-inline">
            <div>
              <el-form-item label="访问房屋" width="200px">
                南航碧桂园小区01栋2单元402
              </el-form-item>
              <el-form-item label="手机号码"> {{}} </el-form-item>
              <el-form-item label="被访问业主"> 蒋锋 住户详情 </el-form-item>
            <el-form-item label="通行证"><img src="../../../assets/images/u1664.png"></el-form-item>

            </div>
            <div>
              <el-form-item label="访客姓名"> 王某人 </el-form-item>
              <el-form-item label="访问日期"> 2022/09/09 </el-form-item>
            </div>
            <div>
              <el-form-item label="访客性别"> 男 </el-form-item>
              <el-form-item label="访问时长"> 3h </el-form-item>
            </div>
          </el-form>
    </div>
    <div class="content-2">
        <p>开门记录</p>
        <el-table :data="tableData" style="width: 50%">
    <el-table-column prop="name" label="开门位置"/>
    <el-table-column prop="date" label="开门时间"/>
  </el-table>
  <el-button>返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="less" scoped>
.visitor {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .header {
    width: 1136px;
    background: white;
    height: 100px;
    margin: 20px 0;
    .el-breadcrumb {
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      margin-left: 30px;
      :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
        color: #aaadb4;
      }
    }
    h1 {
      height: 60px;
      line-height: 60px;
      margin-left: 30px;
      font-family: "Microsoft Tai Le Bold", "Microsoft Tai Le", sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
  .content{
    width: 1136px;
    background: white;
    height: 430px;
    border-bottom: 1px solid #f3f0f5;
    p{
      margin: 20px 40px;
    }
      /deep/.el-form {
        margin-top: 20px;
        width: 100%;
        display: flex;
      justify-content: space-around;
      }
  }
  .content-2{
    width: 1136px;
    background: white;
    height: 350px;
    p,.el-table,.el-button{
      margin: 20px 40px;
    }
  }
}
</style>
